﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">
    <script src="../../../scripts/jquery/jquery-2.1.0.min.js"></script>
    <script src="../../../scripts/jquery/jquery.query.js"></script>
    <script>
        $(document).ready(function()
        {
            $('.details_sku:last').removeClass('unselected').addClass('selected');

        })

        function setprice(price,stock,index,id){
          
         
           
            $('#modelsalePrice').html(price);
            $('.details_sku').removeClass('selected').addClass('unselected');
            $('.details_sku:eq('+(index-1)+')').removeClass('unselected').addClass('selected');
            
          //  $('#spanstock').html( stock);
            $('#hidsku').val(id);
        }

    </script>
    <link href="/shop/templates/yeshou/css/swiper-3.2.7.min.css" rel="stylesheet" />
    <style type="text/css">
        html {
            font-family: 'Microsoft YaHei';
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ol, ul {
            list-style: none;
        }

        .header {
            height: 45px;
            background-color: #0059a9;
            padding: 0 15px;
            line-height: 45px;
        }

            .header .bar {
                text-align: center;
                font-size: 19px;
                color: #fff;
                position: relative;
                height: 45px;
            }

                .header .bar .callback {
                    display: block;
                    position: absolute;
                    height: 12px;
                    width: 12px;
                    -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
                    border: 2px solid #fff;
                    top: 12px;
                    border-right-color: #0059a9;
                    border-top-color: #0059a9;
                }

        .main {
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .goods-img {
            height: 100%;
            width: 100%;
        }

            .goods-img img {
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -160px;
                height: 100%;
                width: 80%;
            }

        .goods-info {
            border-top: 1px solid #DFDFDF;
            padding: 10px 10px;
        }

            .goods-info .name {
                overflow: hidden;
                max-height: 40px;
                font-size: 15px;
                padding-bottom: 5px;
                font-weight: 700;
            }

            .goods-info .desc {
                color: Black;
                font-size: 14px;
            }

        .notice {
            padding: 10px;
            overflow: hidden;
        }

            .notice h3 {
                border-left: 5px solid #dfdfdf;
                padding-left: 5px;
                height: 30px;
                line-height: 30px;
                font-size: 15px;
                font-weight: 700;
            }

            .notice p {
                text-indent: 20px;
                font-size: 14px;
            }

        .bottom {
            position: fixed;
            border-top: 1px solid #dfdfdf;
            height: 40px;
            padding: 10px;
            bottom: 0;
            left: 0;
            right: 0;
        }

            .bottom .price {
                position: absolute;
                left: 10px;
                height: 40px;
                line-height: 40px;
                color: #0059a9;
            }

            .bottom .submit {
                position: absolute;
                width: 100px;
                height: 40px;
                line-height: 40px;
                right: 10px;
                display: block;
                border-radius: 4px;
                background-clip: padding-box;
                background-color: #0059a9;
                color: #fff;
                text-align: center;
                cursor: pointer;
            }

            .bottom .cart {
                position: absolute;
                width: 100px;
                height: 40px;
                line-height: 40px;
                right: 115px;
                display: block;
                border-radius: 4px;
                background-clip: padding-box;
                background-color: #e29325;
                color: #fff;
                text-align: center;
                cursor: pointer;
            }

            
        .unselected {
            background-color:#e6b357;
        }

        .selected {
             background-color:#f5c21f;
        }

        .details_sku {
            border:solid 1px black;width:21%;float:left;margin-right:2px;margin-top:2px;text-align:center
        }
    </style>
</head>
<body>
    <!--<div class="header">
      <div class="bar">
        <a class="callback" href="/shop/reward_index.aspx?wid={$wid}"></a>商品详情
      </div>
    </div>-->
    <div class="main">
        <div class="goods-img">
            <div class="swiper-container" style="height: 200px;">
                <div class="swiper-wrapper">
                    <vt:foreach from="$model.albums" item="albums">
                        <div class="swiper-slide">
                            <img src="{$albums.original_path}" alt="">
                        </div>
                    </vt:foreach>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="goods-info">
            <div class="name">{$model.productName}</div>
            <div class="desc">{$model.shortDesc}</div>
        </div>
        <div class="notice">
            <h3>商品简介</h3>
            <p><div style="font:14px;color:Black">{$model.description}</div></p>
        </div>
        <div class="details_nr">
            <vt:foreach from="$sku" item="sku" index="i">
                <div class="details_sku unselected" onclick="setprice({$sku.price},{$sku.stock},{$i},{$sku.id})">
                    <a>{$sku.attributeValue}</a>
                </div>
            </vt:foreach>
        </div>
        <input type="hidden" id="hidsku" value="0">
        <div class="bottom">
            <div id="divPrice" class="price">
                <span id="modelsalePrice" name="{$model.salePrice}">{$model.salePrice}</span>积分
            </div>
            <a class="cart" id="btncart">加入购物车</a>
            <a class="submit" id="btnExchange">立即兑换</a>
        </div>
    </div>
    <script src="/shop/templates/yeshou/js/swiper-3.2.7.min.js"></script>
    <script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: '.swiper-pagination'
    })

    $(document).ready(function () {
      $("#btnExchange").click(function () {
        var id = $.query.get("pid");
        var bc = $("#proCount").val();
        var skuid = $("#hidsku").val();
        bc = 1;
        var productid = id;

        var jiage = $("#divPrice span").attr('name');
        $.getJSON("/shop/shopmgr.ashx?rtn=score&wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&mid=0&attr=" + "" + "&skuid="+skuid+"&totprice=" + jiage + "&myact=addCart" + "&extratype=exchange", function (d, status) {
            if (d.errCode == "0") {
                location.href = "/shop/confirmOrder.aspx?rtn=score&wid={$wid}&openid={$openid}";
            }
            else {
                alert(d.errCode);
            }
        });
      });

      $("#btncart").click(function () {
          var id = $.query.get("pid");
          var bc = $("#proCount").val();
          var skuid = $("#hidsku").val();
          bc = 1;
          var productid = id;
          var jiage = $("#divPrice span").attr('name');
          $.getJSON("/shop/shopmgr.ashx?wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&mid=0&attr=" + "" + "&skuid="+skuid+"&totprice=" + jiage + "&myact=addCart" + "&extratype=exchange", function (d, status) {
              if (d.errCode=="0") {
                  location.href = "/shop/cart.aspx?rtn=score&wid={$wid}&openid={$openid}";
              }
              else {
                  alert(d.errCode);
              }
          });
      });
    });
    </script>
</body>
</html>